<template>
  <div :class="pngClass" class="icon-container" :style="{width: size + 'px'}">
    <img :src="require('@/assets/icons/png/'+iconClass+'.png')" class="png-img" alt="">
  </div>
</template>

<script>

export default {
  name: 'PngIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    },
    size:{ //目前只设置width
      type : Number,
      default: 20
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    pngClass() {
      if (this.className) {
        return 'png-icon ' + this.className
      } else {
        return 'png-icon'
      }
    },
    
  }
}
</script>

<style scoped>
  .icon-container{
      display: inline-flex;
      justify-content: center;
      align-items: center;
  }
  .png-img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
.png-icon {
  /* vertical-align: -0.15em; */
  /* overflow: hidden; */
}
</style>
